<template>
  <div>
    <nav-bar class="detail-nav">
      <template v-slot:left>
        <img class="back" @click="backClick" src="~assets/img/common/back.svg" alt="">
        
      </template>
      <template v-slot:center>
        <span class="title-item" v-for="(item, index) in titleInfos" :key="index"
          :class="{'titleActive': index === currentIndex}" @click="titleClick(index)">
          {{item}}
        </span>
      </template>
    </nav-bar>
  </div>
</template>

<script>
  import NavBar from '@/components/common/navbar/NavBar'
export default {
  name: 'IshopDetailnavbar',
  components:{
    NavBar
  },
  props:{
    titleInfos:{
      type:Array,
      default: ()=>{
        return ['商品', '参数', '评论','推荐']
      }
    },
    currentIndex: {
		    type: Number,
        default: 0
    }
  },
  methods: {
    titleClick(index){
      this.$emit('itemClick', index)
    },
    backClick() {
      this.$router.back()
    }
  },
};
</script>

<style scoped>

.detail-nav {
    background-color: #fff;
    font-weight: normal;
  }

  .back {
    vertical-align: middle;
  }
  .title-item{
    font-size: 16px;
    padding: 0 8px;
  }
  .titleActive{
    color: var(--color-high-text);
  }
</style>